<template>
  <div class="cinema">
    <div class="title">
      <div class="left" @click='toPage("/city")'>{{cityName}}</div>
      <div class="center">影院</div>
      <div class="right" @click='toPage("/cinema/search")'><i class='iconfont icon-sousuo'></i></div>
    </div>
    <div class="select border-bottom">
      <div class="left" :class='{active:isShow}' @click='isShow=!isShow'>{{currentArea}}</div>
      <div class="center">App订票</div>
      <div class="right">最近去过</div>
    </div>

    <!--选择的区域-->
    <div class="area" v-show='isShow'>
      <ul>
        <li
          @click='currentArea=data;isShow=false'
          class='border'
          :class='{active:currentArea===data}'
          v-for='data in cinemaArea'
          :key='data'
        >{{data}}</li>
      </ul>
    </div>

    <!--渲染影院数据-->
    <div class="cinemalist">
      <ul>
        <li class='border-bottom' v-for='data in getCinemaList' :key='data.cinemaId'>
          <h4>{{data.name}}</h4>
          <p>{{data.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Toast } from 'vant'
export default {
  data() {
    return {
      isShow: false, // 控制area显示隐藏
      currentArea: '全城'
    }
  },
  methods: {
    ...mapActions('cinema', ['getCinemaListAsync']),
    toPage(path) {
      // 通过编程式导航跳转到搜索页面
      this.$router.push(path)
    }
  },
  computed: {
    ...mapState('cinema', ['cinemaList']),
    ...mapState('city', ['cityName', 'cityId']),
    cinemaArea() {
      // 需要对cinemaList进行遍历，获取影院区域
      const districtArray = this.cinemaList.map(item => {
        return item.districtName
      })
      return ['全城', ...new Set(districtArray)]
    },
    getCinemaList() {
      // 判断刚开始的区域如果是全城的话，直接显示所有的影院列表
      if (this.currentArea === '全城') return this.cinemaList

      // 判断传递来的区域的名字与数组的哪个区域的名字一致，把一致的影院放入到新的数组中返回
      return this.cinemaList.filter(item => {
        if (item.districtName === this.currentArea) {
          return true
        } else {
          return false
        }
      })
    }
  },
  created() {
    // 需要触发action方法
    if (this.cinemaList.length === 0) {
      Toast.loading({
        message: '加载中...',
        icon: 'gem-o',
        overlay: true,
        duration: 0
      })
      this.getCinemaListAsync(this.cityId).then(() => {
        // 消失弹窗
        Toast.clear()
      })
    }
  }
}
</script>

<style lang='scss' scoped>
  .active{
    color:orange
  }
  .area{
    position: fixed;
    z-index: 10;
    top: .88rem;
    background: #fff;
    width: 100%;
    ul{
      width:100%;
      display: flex;
      flex-wrap: wrap;
      li{
        width:20%;
        height:.3rem;
        line-height: .3rem;
        text-align: center;
        margin:.06rem .09rem;
        &.active::before{
          border-color: orange!important;
        }
      }
    }
  }
  .cinemalist{
    position: relative;
    top:.88rem;
    background: #fff;
    li{
      padding: .15rem;
      p{
        width:90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .title{
    position: fixed;
    height: .44rem;
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
    align-items: center;
    z-index: 10;
  }
  .select{
    z-index: 10;
    position: fixed;
    top:.44rem;
    height: .44rem;
    background: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
</style>
